<template>
  <footer class="footer">
    <div class="flex justify-between items-center">
      <logo />
      <div class="flex items-center gap-[40px]">
        <div v-for="item in tab" :key="item.name">
          <span class="text-[16px] text-[#222] cursor-pointer">{{ item.name }}</span>
        </div>
      </div>

      <div class="flex items-center gap-[32px]">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none">
          <g clip-path="url(#clip0_341_1181)">
            <path
              d="M18.9014 -2.5H22.5816L14.5415 9.7841L24 26.5H16.5941L10.7935 16.3619L4.15631 26.5H0.473926L9.07356 13.3608L0 -2.5H7.59394L12.8372 6.76662L18.9014 -2.5ZM17.6098 23.5554H19.649L6.48589 0.289949H4.29759L17.6098 23.5554Z"
              fill="#222222" />
          </g>
          <defs>
            <clipPath id="clip0_341_1181">
              <rect width="24" height="24" fill="white" />
            </clipPath>
          </defs>
        </svg>

        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none">
          <g clip-path="url(#clip0_341_1184)">
            <path
              d="M12 2.16094C15.2063 2.16094 15.5859 2.175 16.8469 2.23125C18.0188 2.28281 18.6516 2.47969 19.0734 2.64375C19.6313 2.85938 20.0344 3.12188 20.4516 3.53906C20.8734 3.96094 21.1313 4.35938 21.3469 4.91719C21.5109 5.33906 21.7078 5.97656 21.7594 7.14375C21.8156 8.40937 21.8297 8.78906 21.8297 11.9906C21.8297 15.1969 21.8156 15.5766 21.7594 16.8375C21.7078 18.0094 21.5109 18.6422 21.3469 19.0641C21.1313 19.6219 20.8687 20.025 20.4516 20.4422C20.0297 20.8641 19.6313 21.1219 19.0734 21.3375C18.6516 21.5016 18.0141 21.6984 16.8469 21.75C15.5813 21.8062 15.2016 21.8203 12 21.8203C8.79375 21.8203 8.41406 21.8062 7.15313 21.75C5.98125 21.6984 5.34844 21.5016 4.92656 21.3375C4.36875 21.1219 3.96563 20.8594 3.54844 20.4422C3.12656 20.0203 2.86875 19.6219 2.65313 19.0641C2.48906 18.6422 2.29219 18.0047 2.24063 16.8375C2.18438 15.5719 2.17031 15.1922 2.17031 11.9906C2.17031 8.78438 2.18438 8.40469 2.24063 7.14375C2.29219 5.97187 2.48906 5.33906 2.65313 4.91719C2.86875 4.35938 3.13125 3.95625 3.54844 3.53906C3.97031 3.11719 4.36875 2.85938 4.92656 2.64375C5.34844 2.47969 5.98594 2.28281 7.15313 2.23125C8.41406 2.175 8.79375 2.16094 12 2.16094ZM12 0C8.74219 0 8.33438 0.0140625 7.05469 0.0703125C5.77969 0.126563 4.90313 0.332812 4.14375 0.628125C3.35156 0.9375 2.68125 1.34531 2.01563 2.01562C1.34531 2.68125 0.9375 3.35156 0.628125 4.13906C0.332812 4.90313 0.126563 5.775 0.0703125 7.05C0.0140625 8.33437 0 8.74219 0 12C0 15.2578 0.0140625 15.6656 0.0703125 16.9453C0.126563 18.2203 0.332812 19.0969 0.628125 19.8563C0.9375 20.6484 1.34531 21.3188 2.01563 21.9844C2.68125 22.65 3.35156 23.0625 4.13906 23.3672C4.90313 23.6625 5.775 23.8687 7.05 23.925C8.32969 23.9812 8.7375 23.9953 11.9953 23.9953C15.2531 23.9953 15.6609 23.9812 16.9406 23.925C18.2156 23.8687 19.0922 23.6625 19.8516 23.3672C20.6391 23.0625 21.3094 22.65 21.975 21.9844C22.6406 21.3188 23.0531 20.6484 23.3578 19.8609C23.6531 19.0969 23.8594 18.225 23.9156 16.95C23.9719 15.6703 23.9859 15.2625 23.9859 12.0047C23.9859 8.74688 23.9719 8.33906 23.9156 7.05938C23.8594 5.78438 23.6531 4.90781 23.3578 4.14844C23.0625 3.35156 22.6547 2.68125 21.9844 2.01562C21.3188 1.35 20.6484 0.9375 19.8609 0.632812C19.0969 0.3375 18.225 0.13125 16.95 0.075C15.6656 0.0140625 15.2578 0 12 0Z"
              fill="#222222" />
            <path
              d="M12 5.83594C8.59688 5.83594 5.83594 8.59688 5.83594 12C5.83594 15.4031 8.59688 18.1641 12 18.1641C15.4031 18.1641 18.1641 15.4031 18.1641 12C18.1641 8.59688 15.4031 5.83594 12 5.83594ZM12 15.9984C9.79219 15.9984 8.00156 14.2078 8.00156 12C8.00156 9.79219 9.79219 8.00156 12 8.00156C14.2078 8.00156 15.9984 9.79219 15.9984 12C15.9984 14.2078 14.2078 15.9984 12 15.9984Z"
              fill="#222222" />
            <path
              d="M19.8469 5.59239C19.8469 6.38926 19.2 7.03145 18.4078 7.03145C17.6109 7.03145 16.9688 6.38457 16.9688 5.59239C16.9688 4.79551 17.6156 4.15332 18.4078 4.15332C19.2 4.15332 19.8469 4.8002 19.8469 5.59239Z"
              fill="#222222" />
          </g>
          <defs>
            <clipPath id="clip0_341_1184">
              <rect width="24" height="24" fill="white" />
            </clipPath>
          </defs>
        </svg>

        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none">
          <path
            d="M17.1767 8.66347C18.7201 9.77064 20.6107 10.4221 22.6528 10.4221V6.47861C22.2663 6.47869 21.8808 6.43825 21.5027 6.35786V9.46193C19.4609 9.46193 17.5705 8.81049 16.0267 7.7034V15.7509C16.0267 19.7766 12.7748 23.0399 8.76358 23.0399C7.2669 23.0399 5.8758 22.5858 4.72021 21.807C6.03913 23.1604 7.87845 24 9.91334 24C13.9248 24 17.1769 20.7367 17.1769 16.7108V8.66347H17.1767ZM18.5954 4.68499C17.8066 3.82023 17.2888 2.70267 17.1767 1.46717V0.959961H16.0869C16.3612 2.53028 17.2969 3.87187 18.5954 4.68499ZM7.2573 18.7178C6.81663 18.1379 6.57849 17.4286 6.57955 16.6992C6.57955 14.858 8.06696 13.3651 9.90202 13.3651C10.244 13.365 10.584 13.4176 10.9099 13.5214V9.48977C10.529 9.43739 10.1446 9.41515 9.76035 9.4233V12.5613C9.43419 12.4575 9.09408 12.4048 8.75201 12.4051C6.91695 12.4051 5.42963 13.8979 5.42963 15.7393C5.42963 17.0414 6.17309 18.1687 7.2573 18.7178Z"
            fill="#FF004F" />
          <path
            d="M16.0265 7.70332C17.5702 8.81041 19.4607 9.46185 21.5025 9.46185V6.35778C20.3628 6.11414 19.3538 5.5164 18.5951 4.68499C17.2966 3.87179 16.361 2.5302 16.0867 0.959961H13.2241V16.7106C13.2176 18.5468 11.7327 20.0336 9.90162 20.0336C8.82257 20.0336 7.86394 19.5174 7.25682 18.7178C6.17269 18.1687 5.42923 17.0413 5.42923 15.7394C5.42923 13.8981 6.91655 12.4052 8.75161 12.4052C9.1032 12.4052 9.44208 12.4602 9.75995 12.5614V9.42338C5.81921 9.50509 2.6499 12.7365 2.6499 16.7107C2.6499 18.6946 3.43913 20.4931 4.72006 21.8071C5.87565 22.5858 7.26675 23.04 8.76342 23.04C12.7747 23.04 16.0265 19.7765 16.0265 15.7509V7.70332H16.0265Z"
            fill="#222222" />
          <path
            d="M21.5025 6.3578V5.51848C20.4748 5.52005 19.4672 5.23119 18.5952 4.68493C19.3671 5.53306 20.3835 6.11787 21.5025 6.3578ZM16.0867 0.959983C16.0605 0.809911 16.0404 0.658851 16.0265 0.507214V0H12.074V15.7508C12.0677 17.5868 10.5829 19.0736 8.75164 19.0736C8.214 19.0736 7.70638 18.9455 7.25685 18.7179C7.86397 19.5174 8.82259 20.0336 9.90164 20.0336C11.7326 20.0336 13.2177 18.5469 13.2241 16.7107V0.959983H16.0867ZM9.76014 9.42341V8.52989C9.42988 8.48459 9.09691 8.46186 8.76353 8.46202C4.75192 8.46194 1.5 11.7254 1.5 15.7508C1.5 18.2745 2.77806 20.4987 4.72017 21.807C3.43924 20.493 2.65001 18.6944 2.65001 16.7106C2.65001 12.7365 5.81924 9.50511 9.76014 9.42341Z"
            fill="#00F2EA" />
        </svg>
      </div>
    </div>
    <div class="text-[#7A7A7A] text-[16px] mt-[40px] flex justify-between">
      <div class="flex items-center gap-[58px]">
        <div>© 2025 Nexbie</div>
        <div>Terms and Conditions</div>
        <div>Policy</div>
      </div>

      <div class="flex items-center gap-[40px]">
        <div>Nexbie Guidelines</div>
        <div>Community Rules</div>
        <div>About Nexbie</div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import Logo from '@/components/icons/logo.vue';

  const tab = [
    {
      name: 'Nex Group',
      path: '/',
    },
    {
      name: 'Nex Designer',
      path: '/store',
    },
    {
      name: 'Nex Product',
      path: '/store',
    },
    {
      name: 'Contest',
      path: '/store',
    },
    {
      name: ' Nex Lab',
      path: '/store',
    },
  ];
</script>

<style lang="scss" scoped>
  @use '@/styles/variables' as *;

  .footer {
    padding: 24px 80px;
    margin-top: 80px;
  }
</style>
